<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC-左右滑动图标</title>
</head>

<body>


    https://saas.360.cn/
    <div class="brand-carousel">
        <!--从右向左转-->
        <div class="carousel-row-wrapper">
            <div class="mask-left"></div>
            <div class="carousel-row1">
                <div class="brand"><img src="./images/t01d13ff488ac224dbe.png"></div>
                <div class="brand"><img src="./images/t01545469cd3fc7a774.png"></div>
                <div class="brand"><img src="./images/t01d5caf99537725e73.png"></div>
                <div class="brand"><img src="./images/t014a0a5429d50c205a.png"></div>
                <div class="brand"><img src="./images/t0181ee912dd83879f7.png"></div>
                <div class="brand"><img src="./images/t01c2080fffb24a59d2.png"></div>
                <div class="brand"><img src="./images/t01e283d5b633549039.png"></div>
                <div class="brand"><img src="./images/t01d13ff488ac224dbe.png"></div>
                <div class="brand"><img src="./images/t01545469cd3fc7a774.png"></div>
                <div class="brand"><img src="./images/t01d5caf99537725e73.png"></div>

                <div class="brand"><img src="./images/t01d13ff488ac224dbe.png"></div>
                <div class="brand"><img src="./images/t01545469cd3fc7a774.png"></div>
                <div class="brand"><img src="./images/t01d5caf99537725e73.png"></div>
                <div class="brand"><img src="./images/t014a0a5429d50c205a.png"></div>
                <div class="brand"><img src="./images/t0181ee912dd83879f7.png"></div>
                <div class="brand"><img src="./images/t01c2080fffb24a59d2.png"></div>
                <div class="brand"><img src="./images/t01e283d5b633549039.png"></div>
                <div class="brand"><img src="./images/t01d13ff488ac224dbe.png"></div>
                <div class="brand"><img src="./images/t01545469cd3fc7a774.png"></div>
                <div class="brand"><img src="./images/t01d5caf99537725e73.png"></div>

                <div class="brand"><img src="./images/t01d13ff488ac224dbe.png"></div>
                <div class="brand"><img src="./images/t01545469cd3fc7a774.png"></div>
                <div class="brand"><img src="./images/t01d5caf99537725e73.png"></div>
                <div class="brand"><img src="./images/t014a0a5429d50c205a.png"></div>
                <div class="brand"><img src="./images/t0181ee912dd83879f7.png"></div>
                <div class="brand"><img src="./images/t01c2080fffb24a59d2.png"></div>
                <div class="brand"><img src="./images/t01e283d5b633549039.png"></div>
                <div class="brand"><img src="./images/t01d13ff488ac224dbe.png"></div>
                <div class="brand"><img src="./images/t01545469cd3fc7a774.png"></div>
                <div class="brand"><img src="./images/t01d5caf99537725e73.png"></div>

            </div>
            <div class="mask-right"></div>
        </div>
        <!--从左向右转-->
        <div class="carousel-row-wrapper">
            <div class="mask-left"></div>
            <div class="carousel-row2">
                <div class="brand">
                    <img src="https://p4.ssl.qhimg.com/t01d13ff488ac224dbe.png">
                </div>
                <div class="brand">
                    <img src="https://p4.ssl.qhimg.com/t01d13ff488ac224dbe.png">
                </div>
            </div>
            <div class="mask-right"></div>
        </div>
    </div>
    <style>
        .brand-carousel {
            margin-top: 48px;
        }

        .carousel-row-wrapper {
            white-space: nowrap;

            position: relative;
            margin: 0 auto;
            width: 1200px;
            height: 70px;
            overflow-x: hidden;

            box-sizing: border-box;
        }

        .carousel-row1 {
            white-space: nowrap;
            display: flex;
            -webkit-animation: move-to-left 90s linear infinite;
            animation: move-to-left 90s linear infinite;
        }

        .carousel-row2 {
            white-space: nowrap;
            display: flex;
            flex-direction: row-reverse;
            -webkit-animation: move-to-right 90s linear infinite;
            animation: move-to-right 90s linear infinite;
        }

        /*动画*/
        @keyframes move-to-left {


            0% {
                transform: translateZ(0);
            }

            100% {
                transform: translate3d(-2960px, 0, 0);
                /*调节2960控制动画长度*/
            }
        }

        @keyframes move-to-right {
            0% {
                transform: translateZ(0);
            }

            100% {
                transform: translate3d(2960px, 0, 0);
            }
        }

        .brand:first-child {
            margin-left: 0;
        }

        .brand {


            flex-shrink: 0;
            margin: 0 14px;
            width: 120px;
            height: 54px;
            line-height: 54px;
            text-align: center;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 8px 10px 0 #d2e0f4;
        }

        .brand>img {
            width: 106px;
            height: 46px;
            vertical-align: middle;
            border-style: none;
        }

        .mask-right {
            right: 0;
            background-image: linear-gradient(90deg, rgba(240, 247, 255, 0) 0, #f0f7ff);
            position: absolute;
            top: 0;
            z-index: 10;
            width: 300px;
            height: 70px;
        }

        .mask-left {
            left: 0;
            background-image: linear-gradient(270deg, rgba(240, 247, 255, 0) 0, #f0f7ff);

            position: absolute;
            top: 0;
            z-index: 10;
            width: 300px;
            height: 70px;
        }

        body {
            background: #f0f7ff;
        }
    </style>
</body>

</html>